<template>
  <div id="easyplayer"></div>
</template>

<script>
import { onMounted, watch, nextTick, getCurrentInstance, ref } from 'vue';
export default {
  name: 'player',
  data() {
    return {
      easyPlayer: null,
    };
  },
  props: ['videoUrl', 'error', 'hasaudio'],
  setup(props, { emit }) {
    let { proxy } = getCurrentInstance();

    let easyPlayer = ref(null);

    const { videoUrl } = props;

    /**
     * 初始化播放器
     */
    function initPlay() {
      let options = { Height: true };
      easyPlayer.value = new WasmPlayer(
        null,
        'easyplayer',
        (e) => {
          console.log(e);
        },
        options
      );
    }

    onMounted(() => {
      initPlay();
    });

    watch(
      () => videoUrl,
      (newData, oldData) => {
        console.log(newData, oldData);
      },
      {
        immediate: true,
      }
    );

    return {
      easyPlayer,
    };
  },
  // mounted() {
  //   let paramUrl = decodeURIComponent(this.$route.params.url);
  //   this.$nextTick(() => {
  //     if (typeof this.videoUrl == 'undefined') {
  //       this.videoUrl = paramUrl;
  //     }
  //     console.log('初始化时的地址为: ' + this.videoUrl);
  //     this.play(this.videoUrl);
  //   });
  // },
  // methods: {
  //   play(url) {
  //     console.log(this.height);
  //     if (this.easyPlayer != null) {
  //       this.easyPlayer.destroy();
  //     }
  //     if (typeof this.height == 'undefined') {
  //       this.height = false;
  //     }
  //     this.easyPlayer = new WasmPlayer(null, 'easyplayer', this.eventcallbacK, { Height: this.height });
  //     this.easyPlayer.play(url, 1);
  //   },
  //   pause() {
  //     this.easyPlayer.destroy();
  //     this.easyPlayer = null;
  //   },
  //   eventcallbacK(type, message) {
  //     // console.log("player 事件回调")
  //     // console.log(type)
  //     // console.log(message)
  //   },
  // },
  // destroyed() {
  //   this.easyPlayer.destroy();
  // },
};
</script>

<style>
.LodingTitle {
  min-width: 70px;
}
/* 隐藏logo */
.iconqingxiLOGO {
  display: none !important;
}
</style>